<template>
  <div class="container">
    <h1 class="registerTitle"><a @click="backHome()"
         style="color: #666;">Jason 的博客</a></h1>
    <div class="registerInfo">
      <div class="registerBox">
        <div class="title">
          <h1 style="color: #666;">注册</h1>
          <p style="text-align: right;"
             class="register">已有账户<a @click="skipLogin()">登录</a></p>
        </div>
        <Input v-model="account"
               type="text"
               placeholder="用户名"
               style="width: 300px" />
        <div v-show="accountInfoError">
          <Icon type="ios-close-circle-outline" />
          <div class="account-error-alert-content">
            <span class="account-error-alert">请输入用户名</span>
          </div>
        </div>
        <Input v-model="email"
               type="email"
               placeholder="邮箱"
               style="width: 300px" />
        <div v-show="emailInfoError">
          <Icon type="ios-close-circle-outline" />
          <div class="email-error-alert-content">
            <span class="email-error-alert">请输入邮箱</span>
          </div>
        </div>
        <Input v-model="password"
               type="password"
               placeholder="密码"
               style="width: 300px" />
        <div v-show="passwordInfoError">
          <Icon type="ios-close-circle-outline" />
          <div class="pwd-error-alert-content">
            <span class="pwd-error-alert">请输入密码</span>
          </div>
        </div>
        <Input v-model="confirmPassword"
               type="password"
               placeholder="确认密码"
               style="width: 300px" />
        <div v-show="confirmPasswordInfoError">
          <Icon type="ios-close-circle-outline" />
          <div class="confirm-pwd-error-alert-content">
            <span class="confirm-pwd-error-alert">请确认密码</span>
          </div>
        </div>
        <Button class="register-button"
                type="primary"
                @click="register()"
                long>注册</Button>
      </div>
    </div>
  </div>
</template>
<script>
import { Message } from 'element-ui';
export default {
  data() {
    return {
      account: '',
      email: '',
      password: '',
      confirmPassword: '',
      accountInfoError: false,
      emailInfoError: false,
      passwordInfoError: false,
      confirmPasswordInfoError: false
    };
  },
  methods: {
    backHome() {
      this.$router.push({ path: '/' });
    },
    skipLogin() {
      this.$router.push({ path: '/login' });
    },
    register() {
      const userInfo = [
        {
          account: this.account,
          email: this.email,
          password: this.password,
          confirmPassword: this.confirmPassword
        }
      ];
      let that = this;
      this.$store.dispatch('UserRegister', userInfo).then(result => {
        if (result.success === 1) {
          Message({
            message: result.message,
            type: 'success',
            duration: 1000
          });
          that.$router.push({ path: '/login' });
        } else {
          Message({
            message: result.message,
            type: 'error',
            duration: 3000
          });
        }
      });
    }
  }
};
</script>
<style scoped>
.register {
  line-height: 36px;
  position: absolute;
  top: 0;
  right: 0;
}

.title {
  position: relative;
}

.registerBox {
  padding-bottom: 0;
  padding: 40px;
  background-color: white;
}

.registerBox div {
  margin-top: 10px;
  margin-bottom: 10px;
}

.registerInfo {
  margin-top: 25px;
}

.registerTitle {
  margin-top: 50px;
  text-align: center;
}

.container {
  width: 380px;
  height: 400px;
  margin: 0 auto;
}
</style>